<template>
	<view class="wxpup">
		<view class="shade" v-show="showPup" @click="hidePop">
			<view class="pop" :style="popStyle" :class="{'show':showClass}" v-if="wxPupData.is_roomchat && wxPupData.is_roomchat == 1">
				<view class="pop-box" v-for="(item,index) in presslist1" :key="index" v-if="item.is_show" @click="change(item)">
					<view class="pop-item">
						<image :src="item.img" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					
				</view>
			</view>
			<view class="pop" :style="popStyle" :class="{'show':showClass}" v-else>
				<view class="pop-box" v-for="(item,index) in presslist" :key="index" v-if="item.is_show" @click="change(item)">
					<view class="pop-item">
						<image :src="item.img" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'wxpup',
		props: {
			wxPupData: {
				type: Object,
				required: true,
				default: 1
			},
		},
		watch: {
			wxPupData(e, oldVal) {
				let [touches, style, index, ] = [e.touches[0], "", e.currentTarget.dataset.index];

				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > (this.winSize.height / 2)) {
					style = `bottom:${this.winSize.height-touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > (this.winSize.witdh / 2)) {
					style += `right:32rpx`;
				} else {
					style += `left:32rpx`;
				}
				// style：计算出弹窗在页面显示的位置
				this.popStyle = style;

				/*
				 * 计算时长，m<2：2分钟以内可以撤回，用户id用来判断只能撤回我自己发送的内容
				 * type：0删除，1撤回，2转发，3预览，4下载，5收藏，6取消收藏，
				 * navList：可根据数据信息，自行组合navList需要显示的内容。
				 */
				let timestamp = Date.parse(new Date());
				let start = e.item.createtime * 1000; //2017-4-10 10:00
				let end = timestamp; //2017-5-10 10:00
				let utc = end - start;
				// let m = this.$toFixed(utc / (60 * 1000), 0)
				// if(e.item.user_id == e.my_user_id && m<2){
				this.navList = [{
					text: '预览',
					type: 3
				}, {
					text: '删除',
					type: 0
				}, {
					text: '撤回',
					type: 1
				}]
				// }else{
				// 	this.navList = [{text: '预览',type:3},{text: '删除',type:0}]
				// }
				if(e.is_roomchat && e.is_roomchat == 1){
					// if (Number(e.item.contentType) == 1) {
					// 	this.presslist1[1].is_show = true
					// }else if (Number(e.item.contentType) == 0) {
					// 	this.presslist1[1].is_show = false
					// }
					if (Number(e.item.contentType) == 0) {
						this.presslist1[1].is_show = false
					}else {
						this.presslist1[1].is_show = true
					}
				}else{
					if (Number(e.item.is_collect) === 1) {
						this.presslist[4].name = '取消收藏'
					} else {
						this.presslist[4].name = '收藏'
					}
					if (Number(e.item.contentType) == 0) {
						this.presslist[0].is_show = true
						this.presslist[5].is_show = false
						this.presslist[6].is_show = false
						this.presslist[7].is_show = false
						this.presslist[8].is_show = false
					}
					if (Number(e.item.contentType) == 1) {
						this.presslist[0].is_show = false
						this.presslist[5].is_show = true
						this.presslist[6].is_show = true
						this.presslist[7].is_show = false
						this.presslist[8].is_show = true
					}
					if (Number(e.item.contentType) == 2) {
						this.presslist[0].is_show = false
						this.presslist[5].is_show = false
						this.presslist[6].is_show = false
						this.presslist[7].is_show = true
						this.presslist[8].is_show = false
					}
					if (Number(e.item.contentType) == 6) {
						this.presslist[0].is_show = false
						this.presslist[5].is_show = true
						this.presslist[6].is_show = false
						this.presslist[7].is_show = false
						this.presslist[8].is_show = false
					}
					if (Number(e.item.contentType) == 7) {
						this.presslist[0].is_show = false
						this.presslist[5].is_show = true
						this.presslist[6].is_show = false
						this.presslist[7].is_show = false
						this.presslist[8].is_show = false
					}
					if (Number(e.item.contentType) == 8) {
						this.presslist[0].is_show = false
						this.presslist[5].is_show = true
						this.presslist[6].is_show = false
						this.presslist[7].is_show = false
						this.presslist[8].is_show = false
					}
				}
				
				
				this.$forceUpdate();

				// 显示弹窗
				this.showPup = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showClass = true;
					}, 10);
				});
			},
		},
		data() {
			return {
				navList: [],
				presslist1: [ {
						name: '引用',
						img: '',
						index: 3,
						is_show: true,
					},  {
						name: '查看',
						img: '',
						index: 13,
						is_show: false,
					},
				],
				
				presslist: [{
						name: '复制',
						img: '../../static/chatpress/1@3x.png',
						index: 1,
						is_show: true,
					}, {
						name: '转发',
						img: '../../static/chatpress/2@3x.png',
						index: 2,
						is_show: true,
					}, {
						name: '引用',
						img: '../../static/chatpress/3@3x.png',
						index: 3,
						is_show: true,
					}, {
						name: '删除',
						img: '../../static/chatpress/4@3x.png',
						index: 4,
						is_show: true,
					}, {
						name: '收藏',
						img: '../../static/chatpress/5@3x.png',
						index: 5,
						is_show: true,
					},
					{
						name: '保存',
						img: '../../static/chatpress/5@3x.png',
						index: 11,
						is_show: false,
					},
					{
						name: '保存为表情',
						img: '../../static/chatpress/5@3x.png',
						index: 9,
						is_show: false,
					},
					{
						name: '转文字',
						img: '../../static/chatpress/5@3x.png',
						index: 10,
						is_show: false,
					},
					{
						name: '分享',
						img: '../../static/chatpress/5@3x.png',
						index: 12,
						is_show: false,
					},
					{
						name: '举报',
						img: '../../static/chatpress/6@3x.png',
						index: 6,
						is_show: true,
					}, {
						name: '多选',
						img: '../../static/chatpress/7@3x.png',
						index: 7,
						is_show: true,
					},
				],
				popStyle: "",
				showPup: false,
				showClass: false,
				winSize: {},
			}
		},
		mounted() {
			this.getWindowSize();
			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
		},
		methods: {
			/*
			 * change(item)
			 * item.type：0删除，1撤回，2转发，3预览，4下载，5收藏，6取消收藏，
			 * item.msg_type：消息类型video,text,image,
			 * change方法中，根据type操作类型和msg_type消息类型，来判断需要进行的具体操作。
			 */
			change(item) {

				this.$emit('change', item)
				// 根据type和msg_type来判断具体需要调用下方哪个方法。
			},

			// 图片操作
			changeImg(type) {
				if (type == 3) {
					// 图片预览
					let arr = [];
					arr.push(this.$imgUrl + this.wxPupData.item.content)
					uni.previewImage({
						urls: arr,
					});
				} else if (type == 4) {
					// 图片下载
					// #ifdef H5
					location.href = this.$imgUrl + this.wxPupData.item.content;
					// #endif
					// #ifdef APP-PLUS
					this.$saveImageToPhotosAlbum(this.$imgUrl + this.wxPupData.item.content)
					// #endif
				}
			},
			// 文件视频操作
			changeFile(type) {
				if (type == 4) {
					// 下载
					// #ifdef H5
					location.href = this.$imgUrl + this.wxPupData.item.content;
					// #endif

					// #ifdef APP-PLUS
					uni.showLoading({
						title: '正在下载'
					});
					var url = this.$imgUrl + this.wxPupData.item.content;
					let dtask = plus.downloader.createDownload(url, {
						//本地路径开头使用file://，跟上手机文件本地目录storage/emulated/0，这时用户文件管理器能看到的了，之后创建连信作为文件夹，后缀是用于文件命名和格式修改，大家可以使用变量。
						filename: "file://storage/emulated/0/我的APP/" + this.wxPupData.item
							.file_name //利用保存路径，实现下载文件的重命名
					}, (d, status) => {
						//d为下载的文件对象
						if (status == 200) {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '已保存到文件夹：/我的APP/' + this.wxPupData.item.file_name, //保存路径
								duration: 3000,
							});
							//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
							let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
							setTimeout(() => {
								plus.runtime.openFile(d.filename); //选择软件打开文件
							}, 1500)
						} else {
							//下载失败
							uni.hideLoading();
							plus.downloader.clear(); //清除下载任务
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '下载失败，请稍后重试',
							});
						}
					})
					dtask.start();
					// #endif
				}
			},


			// 撤回
			msgRevoke() {
				this.$http.post("/api/***", {
					id: this.wxPupData.item.id,
				}).then(res => {
					if (res.code == 1) {
						this.$emit('getNewList')
					}
				})
			},
			// 删除
			msgDelete() {
				this.$http.post("/api/***", {
					id: this.wxPupData.item.id,
					session_id: this.wxPupData.item.session_id,
				}).then(res => {
					if (res.code == 1) {
						this.$emit('getNewList')
					}
				})
			},
			// 收藏
			msgFavAdd() {
				this.$http.post("/api/***", {
					msg_id: this.wxPupData.item.id,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '收藏成功',
						});
						this.$emit('getNewList');
					}
				})
			},
			// 取消收藏
			msgFavCancel() {
				this.$http.post("/api/***", {
					msg_id: this.wxPupData.item.msg_id,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '已取消',
						});
						this.$emit('getNewList');
					}
				})
			},

			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			/* 隐藏弹窗 */
			hidePop() {
				this.showClass = false;
				this.showPup = false;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.wxpup {

		/* 遮罩 */
		.shade {
			position: fixed;
			z-index: 100;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			
			
			
			-webkit-touch-callout: none;

			.pop {
				position: fixed;
				z-index: 101;
				color: #333;
				background: #596084;
				border-radius: 12rpx;
				transition: transform 0.15s ease-in-out 0s;
				user-select: none;
				-webkit-touch-callout: none;
				transform: scale(0, 0);
				
				// max-width: 70vw;
				// white-space: nowrap;
				
				padding:0 10px ;
				

				&.show {
					transform: scale(1, 1);
				}

				.pop-box {
					display: inline-block;
					// width: 120rpx;
					// height: 140rpx;
					width: 100px;
					padding: 10px 0;
					display: flex;
					// align-items: center;
					justify-content: center;
					flex-direction: column;

					
				}
				
				
				.pop-item{
					display: flex;
					align-items: center;
					
					uni-image {
						width: 36rpx;
						height: 36rpx;
						display: block;
						margin: 0 5px;
					}
					
					uni-text {
						display: block;
						font-size: 26rpx;
						color: #fff;
					}
				}
				
			}
		}
	}
</style>